<template>
  <div>
    <div class="flex jc-sb bg-fff pr-20">
      <HeaderTitle :textObj="textObj"></HeaderTitle>
    </div>
    <!-- tab栏 -->
    <el-tabs
      class="mt-10"
      type="border-card"
      @tab-change="tabChange"
      v-model="activeName"
    >
      <el-tab-pane name="all" label="所有设备"></el-tab-pane>
      <el-tab-pane name="LoRaWAN" label="LoRaWAN"></el-tab-pane>
      <el-tab-pane name="NB-IoT" label="NB-IoT"></el-tab-pane>
      <el-tab-pane name="4G/2G" label="4G/2G"></el-tab-pane>
      <el-tab-pane name="LoRaPP" label="LoRaPP"></el-tab-pane>
    </el-tabs>
    <!-- 表单 -->
    <div class="bg-fff p-20">
      <el-form :model="form" label-width="auto" style="max-width: 400px">
        <el-form-item label="EUI:">
          <el-input v-model="form.eui" />
        </el-form-item>
        <el-form-item label-width="auto" label="设置群组设备：">
          <el-select v-model="form.devGroup" placeholder="群组设备">
            <el-option label="全部" value="" />
            <el-option
              v-for="item in moveGroupList"
              :key="item.id"
              :label="item.groupName"
              :value="item.groupName"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="在线状态：">
          <el-select v-model="form.online" placeholder="在线状态">
            <el-option label="全部" value="" />
            <el-option label="在线" value="true" />
            <el-option label="离线" value="false" />
          </el-select>
        </el-form-item>
        <!-- 绑定时间 -->
        <el-form-item label="绑定时间：">
          <div class="flex">
            <el-date-picker
              class="mr-30"
              v-model="form.date1"
              type="date"
              placeholder="开始日期"
            />
            <span> 至 </span>
            <el-date-picker
              class="ml-30"
              v-model="form.date2"
              type="date"
              placeholder="结束日期"
            />
          </div>
        </el-form-item>
      </el-form>
      <el-button type="primary" :icon="Search" @click="handleSearch"
        >搜索</el-button
      >
      <el-button type="primary" :icon="Delete" @click="handleReset"
        >删除条件</el-button
      >
      <el-button type="primary" :icon="Refresh" @click="getList"
        >刷新</el-button
      >
      <span class="ml-20 f14">搜寻到了{{ total }}条结果</span>
    </div>
    <!-- 列表 -->
    <el-table class="mt-10" :data="tableData" stripe style="width: 100%" border>
      <el-table-column
        align="center"
        type="index"
        :index="indexMethod"
        label="序号"
        width="80"
      />
      <el-table-column align="center" prop="eui" label="eui码" width="180" />
      <el-table-column
        align="center"
        prop="name"
        label="设备名称"
        width="180"
      />
      <el-table-column
        align="center"
        prop="nums"
        label="传感器通道"
        width="100"
      />
      <el-table-column
        align="center"
        prop="devGroup"
        label="设备群组"
        width="180"
      />
      <el-table-column
        align="center"
        prop="loop"
        label="上报周期（分钟）"
        width="100"
      />
      <el-table-column
        align="center"
        prop="mhz"
        label="频率（MHz）"
        width="100"
      />
      <el-table-column
        align="center"
        prop="online"
        label="在线状态"
        width="130"
      />
      <el-table-column
        align="center"
        prop="bTime"
        label="绑定时间"
        width="180"
        :formatter="formatDate"
      />
      <el-table-column
        align="center"
        prop="uTime"
        label="更新时间"
        width="180"
        :formatter="formatDate"
      />
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        min-width="120"
      >
        <template #default="scope">
          <el-link
            @click="changeGroup(scope.row, scope.$index)"
            style="margin-right: 20px; color: #409eff"
            >移动</el-link
          >
          <el-link style="color: #409eff">详情</el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗 -->
    <el-dialog
      draggable
      align-center
      v-model="show"
      :title="dialogTitle"
      width="30%"
    >
      <el-form label-width="110px">
        <el-form-item label="请选择群组">
          <el-select v-model="selecGroup" placeholder="Select" clearable>
            <el-option
              v-for="item in moveGroupList"
              :key="item.id"
              :label="item.groupName"
              :value="item.groupName"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="show = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 页数 -->
    <div class="fcc bg-fff p-20">
      <el-pagination
        :hide-on-single-page="true"
        @current-change="onChange"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="params.pageSize"
        :current-page="params.currPage"
      />
    </div>
  </div>
</template>

<script setup>
import {
  $sensorList,
  $sensorChangGroup,
  $sensorAdd,
  $deviceSensorList,
  $groupAll,
} from "../../api/index.js";
import { ref, onMounted } from "vue";
import HeaderTitle from "../../components/HeaderTitle.vue";
import { formatDate } from "../../utils/utils";
import {
  Edit,
  Delete,
  Search,
  ArrowDown,
  Refresh,
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
let textObj = {
  title: "设备 ",
  name: "传感器列表",
  dsc: "展示EUI、名称、状态、数据类型等设备信息，可根据EUI、群组、状态、绑定时间等条件筛选具体的传感器节点，并提供移动群组等功能。",
};
const total = ref(5);
// 表单数据
const form = ref({
  eui: "",
  devGroup: "",
  online: "",
  date1: "",
  date2: "",
});

let dialogTitle = ref("选择群组");
// 表格数据
const tableData = ref([
  {
    id: "500000201910165525",
    eui: "2XB16420832",
    mhz: "CN553-401",
    online: false,
    country: "China",
    agreement: "LoRaPP",
    name: "土壤温湿度传感器",
    powerNum: 79,
    nums: "2",
    devGroup: "潍坊农业基地",
    loop: 3,
    bTime: 1634608495317,
    uTime: 1634608495317,
    devName: "土壤温湿度",
    devValue: "43%RH",
  },
]);

// 获取节点传感器表格数据
let moveGroupList = ref([]);
// 获取群组列表
const groupList = async () => {
  let res = await $groupAll();
  moveGroupList.value = res.data;
};
const params = {
  currPage: 1,
  pageSize: 5,
  agreement: "all",
  date: "",
};
const getList = async () => {
  if (form.value.date1 && form.value.date2) {
    let bTimeStart = new Date(form.value.date1).getTime();
    let bTimeEnd = new Date(form.value.date2).getTime();
    params.date = `${bTimeStart}-${bTimeEnd}`;
  }
  const searchParams = {
    ...params,
    ...form.value,
  };
  let res = await $sensorList(searchParams);
  total.value = res.total;
  tableData.value = res.data;
  tableData.value.map((item) => {
    if (item.online) {
      item.online = "在线";
    } else {
      item.online = "离线";
    }
  });
};
// tab栏跳转渲染
let activeName = ref("all");
const tabChange = (name) => {
  params.currPage = 1;
  params.agreement = name;
  getList();
};
// 分页渲染
const onChange = (page) => {
  params.currPage = page;
  getList();
};
// 移动节点传感器到群组
let show = ref(false);
let data = {
  id: "",
  devGroup: "",
};
const changeGroup = async (row, index) => {
  data.id = row.id;
  show.value = true;
};
// 实现移动
let selecGroup = ref({});
const onSubmit = async () => {
  data.devGroup = selecGroup.value;
  let res = await $sensorChangGroup(data);
  ElMessage({
    type: "success",
    message: "移动成功",
  });
  getList();
  show.value = false;
};

// 搜索按钮点击事件
const handleSearch = () => {
  params.currPage = 1;
  getList();
};

// 重置按钮点击事件
const handleReset = () => {
  form.value = {
    eui: "",
    devGroup: "",
    online: "",
    bTimeStart: "",
    bTimeEnd: "",
    date1: "",
    date2: "",
  };
  params.date = "";
  params.currPage = 1;
  getList();
};

onMounted(() => {
  getList();
  groupList();
});
// 定义 indexMethod 函数
const indexMethod = (index) => {
  return index + 1;
};
</script>    